<template>
	<view class="pl-3 pr-3 mb-2">
		<view class="order-box" v-if="orderObject">
			<view class="title">
				{{title}}
			</view>
			<view class="box" :style="getStyle">
				<view class="box-header d-flex flex-column j-center">
					<view class="header-title">
						{{orderObject.orderTitle}}
					</view>
					<view class="header-number d-flex flex-row a-center" :style="textColor">
						{{orderObject.orderValue}}笔 <!-- <text class="end-date ml-1">2024-05-07</text> -->
					</view>
				</view>
				<view class="box-item">
					<view class="d-flex flex-column a-center j-center" v-for="(item,index) in orderObject.list" :key="index">
						<text class="font-md text-title">{{item.title}}</text>
						<text class="text-value font-lg font-weight-400" :style="textColor">{{item.value}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			orderObject: Object,
			title: String,
			index: Number
		},
		computed: {
			getStyle() {
				let color = [{
					background: 'linear-gradient(216deg, rgba(255,148,74,0.74), rgba(253,104,1,0.05));',
				},
				{
					background: 'linear-gradient(216deg, rgba(109, 195, 255, 1), rgba(253,104,1,0.05));',
				},
				{
					background: 'linear-gradient(216deg, rgba(75, 235, 255, 1), rgba(253,104,1,0.05));',
				}]
				let background = color[this.index].background
				return `background: ${background};`
			},
			textColor(){
				let colorlist = ['#FD4601','#2C8ED3','#13AABD']
				let textcolor = colorlist[this.index]
				return `color: ${textcolor};`
			}
			// getItemStyle(){
			// 	let color = [{
			// 		background: 'linear-gradient(to right, #FFEFE4, #ffffff'
			// 	}]
			// 	let background = color[0].background
			// 	return `background: ${background};`
				
			// }
		},
		data() {
			return {

			}
		},
		methods: {
			returnUnit(orderTitle) {
				let unit = null
				switch (orderTitle) {
					case "订单":
						unit = "笔";
						break;
					case "商品":
						unit = "件";
						break;
					default:
						unit = "个";
						break;
				}
				return unit
			},
		}
	}
</script>

<style scoped lang="scss">
	.order-box {
		width: 100%;
		height: auto;

		.title {
			font-weight: 500;
			font-size: 34rpx;
			color: #181C25;
			line-height: 37px;
			height: 75rpx;
		}

		.box {
			height: auto;
			box-sizing: border-box;
			border-radius: 33rpx;
			border: 6px solid #FFFFFF;
			padding: 28upx 16upx;
			.box-header{
				.header-title{
					font-weight: 500;
					font-size: 32rpx;
					color: #181C25;
				}
				.header-number{
					font-weight: 500;
					font-size: 42rpx;
					color: #FD5C09;
					.end-date{
						display: inline-block;
						width: 190rpx;
						height: 33rpx;
						border: 1px solid #FFFFFF;
						font-weight: 500;
						font-size: 22rpx;
						color: #FFFFFF !important;
						line-height: 33rpx;
						text-align: center;
					}
					
				}
			}
			.box-item{
				height: auto;
				border-radius: 33rpx;
				border: 4px solid #FFFFFF;
			    box-sizing: border-box;
				background: rgba(255,255,255,.5);
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				justify-content: flex-start;
				padding: 33upx 0;
				view{
					width: 25%;
					.text-title{
						font-weight: 500;
						font-size: 18rpx;
						color: #181C25;
					}
					.text-value{
						font-weight: 500;
						font-size: 27rpx;
						color: #FD4601;
					}
				}
			}
		}


	}
</style>